<template>
    <div class="user-info flex-col" :style="[infoStyle]">
        <div class="user-top flex-1 col-top">
            <div class="flex">
                <img
                    class="icon-avatar"
                    :src="
                        content.avatar_type == 2 && content.avatar
                            ? $getImageUri(content.avatar)
                            : require('@/assets/images/icon_portrait.png')
                    "
                    mode=""
                />
                <div class="m-l-15 flex-1">
                    <div class="xxl black">会员昵称</div>
                    <div class="xs black">
                        <span class="label">ID:</span>
                        <span class="value" style="margin-left: 10px">0000</span>
                    </div>
                    <!-- <div class="xs black">
                        <span class="label">推荐导师:</span>
                        <span class="value" style="margin-left: 10px">0000</span>
                    </div> -->
                    <!-- <div class="flex user-id m-t-4" v-if="content.show_user_sn">
                        <div class="xs m-r-6 white">会员ID: 00000000</div>
                        <div class="xs copy-btn">复制</div>
                    </div> -->
                </div>
            </div>
        </div>
        <widget-root :styles="navaWrapStyle">
            <div class="assets-nav" :style="[navaStyle]">
                <!-- <div class="assets-item flex-col col-center" v-for="item in content.data">
                    <div class="number" :style="{'color': styles.nav_value_font_color}"> 0 </div>
                    <div class="label" :style="{'color': styles.nav_label_font_color}">{{ item.name }}</div>
                </div> -->
                <div class="flex" style="justify-content: space-between; font-size: 17px; font-weight: 700">
                    <div v-for="item in content.data">
                        <div :style="{ color: styles.nav_label_font_color }" v-if="item.field == 'value_added'">
                            {{ item.name }}
                        </div>
                    </div>
                    <!-- <div style="color: #666666">历史记录123</div> -->
                </div>
                <div style="display: flex; width: 100%; padding: 10px 0">
                    <div v-for="item in content.data" :key="item">
                        <div v-if="item.field == 'balance'" style="margin-right: 50px">
                            <div class="colo1" :style="{ color: styles.nav_label_font_color }">
                                {{ item.name }}
                            </div>
                            <div class="colo" :style="{ color: styles.nav_value_font_color }">0</div>
                        </div>
                        <div v-if="item.field == 'not_withdraw_balance'" style="margin-right: 30px">
                            <div class="colo1" :style="{ color: styles.nav_label_font_color }">
                                {{ item.name }}
                            </div>
                            <div class="colo" :style="{ color: styles.nav_value_font_color }">0</div>
                        </div>
                    </div>
                </div>
                <div class="dibu">
                    <div>提现余额</div>
                </div>
            </div>
        </widget-root>

        <!-- v-if="content.show_member" -->
        <div class="user-grade flex row-between" v-if="false">
            <div class="sm"><span class="lg m-r-6 weight-500" style="font-style: italic">V</span>登录查看会员权益</div>
            <div class="xs">了解会员 <i class="el-icon-arrow-right"></i></div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

import Indicator from '@/components/decorate/indicator.vue'
import WidgetRoot from '@/components/decorate/widget-root.vue'

import { assetsOptions } from './const'

@Component({
    components: {
        Indicator,
        WidgetRoot
    }
})
export default class UserInfoContents extends Vue {
    @Prop() content!: any
    @Prop() styles!: any

    get assetsOptions() {
        return [...assetsOptions].filter(item => {
            return this.content.assets.includes(item.value)
        })
    }

    get infoStyle() {
        const { background_image, background_type } = this.content
        if (!background_image || background_type == 1) {
            return {}
        }
        return {
            'background-image': `url(${this.$getImageUri(this.content.background_image)})`
        }
    }
    get navaStyle() {
        const styles = this.styles
        const border_radius_top = styles.nav_border_radius_top
        const border_radius_bottom = styles.nav_border_radius_bottom
        const radius = `${border_radius_top}px ${border_radius_top}px ${border_radius_bottom}px ${border_radius_bottom}px`
        return {
            'background-color': this.styles.nav_bg_color,
            'border-radius': radius
        }
    }
    get navaWrapStyle() {
        const styles = this.styles
        // padding: `${styles.padding_top}px ${styles.padding_horizontal}px ${styles.padding_bottom}px`,
        //     'background-color': styles.root_bg_color
        return {
            padding_top: styles.nav_padding_top,
            padding_bottom: styles.nav_padding_bottom,
            padding_horizontal: styles.nav_padding_horizontal,
            'background-color': styles.nav_root_bg_color
        }
    }

    get showAssets() {
        return (type: number) => {
            return this.content.assets.includes(type)
        }
    }
}
</script>

<style lang="scss" scoped>
.user-info {
    background: url('../../../../assets/images/bg_user.png'), linear-gradient(to right, #f95f2f 0%, #ff2c3c 100%);
    background: linear-gradient(0deg, #e4f2f8 0%, #ffd100 100%);
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-sizing: border-box;
    .user-top {
        padding: 35px 15px 0;
        .icon-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 1px solid #f8f8f8;
        }
        .user-id {
            display: inline-flex;
            border: 1px solid #fff;
            border-radius: 50px;
            padding-left: 10px;
            .copy-btn {
                padding: 1.5px 10px;
                border-radius: 10px;
                background: #fff;
            }
        }
        .label {
            display: inline-block;
            // width: 60px;
        }
        .value {
            display: inline-block;
        }
    }
    .assets-nav {
        width: 338px;
        background-color: #fff;
        margin: 0 auto;
        padding: 19px 23.5px;
        .dibu {
            display: flex;
            justify-content: space-between;
            div {
                width: 135px;
                height: 47px;
                background-color: #ff584d;
                text-align: center;
                line-height: 47px;
                color: #fff;
                font-weight: bold;
                font-size: 14px;
                border-radius: 50px;
            }
        }
        .colo {
            font-weight: bold;
            font-size: 22px;
            margin-top: 5px;
        }
        .colo1 {
            font-size: 16px;
        }
    }
    .user-grade {
        color: #ffe0a1;
        height: 40px;
        background: url('../../../../assets/images/bg_user_grade.png');
        background-size: 100%;
        padding: 0 10px;
        margin: 0 10px;
    }
}
</style>
